<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>history</title>
  </head>
  <body>
    <button class="forward">前进</button>
    <button class="back">后退</button>
    <script>
      //

      document.querySelector('.forward').addEventListener('click', () => {
        history.forward()
        console.log(history.state)
      })

      document.querySelector('.back').addEventListener('click', () => {
        history.back()
        console.log(history.state)
      })

      /*
              调用pushState和replaceState 不会调用popstate事件,且不会触发浏览器的加载机制

            */
      // console.log(history)
      const state = {
        name: 'ggg'
      }
      let title = 'test',
        url = ''
      window.addEventListener('popstate', (e) => {
        console.log(e)
      })
      history.replaceState(state, title, url)
      /*
              1. 点击浏览器的回退按钮会触发popstate事件(那么使用history的forward等方法也可以触发这个事件)
              2. 使用history.pushState 和  replaceState时不会触发popstate事件

            */
      history.back()
      console.log(history.length)
    </script>
  </body>
</html>
